<!-- <nav class="col-sm-3" id="scroll-spy-controller">
  <ul class="nav nav-pills nav-stacked">
    <li><a id="overview" href="#overview">over</a></li>
    <li><a id="matrix" href="#matrix">matrix</a></li>
    <li><a id="support-use-cases" href="#support-use-cases">support-use-cases</a></li>

    {{#each data.menuData }}
    <li><a id="{{ this.text }}" href="{{ this.data.url }}">{{ this.text }}</a></li>
    {{/each}}

  </ul>
</nav> -->

<nav id="accordian-menu" class="accordian-menu">
{{#each data.menuData }}
<a href="{{ this.data.url }}" class="bold small text-uppercase mt-3 mb-1 level-1">{{ this.text }}</a>
  {{#each this.children}}
  <nav class="nav flex-column font-sm">
    <a class="pl-0 nav-item nav-link bold active level-2" href="{{ this.data.url }}"><span>{{ this.text }}</span></a>
    <!-- third level -->
    {{#each this.children}}
      <a class="pl-0 nav-item nav-link level-3" href="{{ this.data.url }}"><span>{{ this.text }}</span></a>
    {{/each}}
    <!-- third level end -->
  </nav>
  {{/each}}
{{/each}}
</nav>